<template>
  <div>
    <router-view></router-view>
    <div class="search">
      <header>
        <!-- <i class="iconfont icon-arrow-left"></i> -->
        <h3>今天吃什么</h3>
      </header>
      <div class="searchOption">
        <router-link to="searchtc">
          <div class="searchInput">
            <i class="iconfont icon-sousuoxiao"></i>
            <input type="text" placeholder="搜索菜谱" />
          </div>
        </router-link>
        <router-link to="home/xiaoxi"><i class="iconfont icon-xiaoxi"></i></router-link>
      </div>
    </div>
    <div class="content">
      <ul class="ul1">
        <!-- 第一个列表 -->
        <li v-for="(item, index) in list1" :key="index" class="list1">

          <div class="li1">
            <img class="img1" :src="item.coverImg" alt="" @click="goDetail(item)" />
            <span class="scang" @click="shoucang(item, index)">
              <i class="iconfont icon-aixin" :class="item.issc == true ? 'icon-aixin1' : ''">
              </i>
            </span>

            <p class="biaoti">
              <span>
                <span class="bt1"> 减肥也要吃～ </span><br />
                低卡韩式拌饭
              </span>
            </p>
          </div>

        </li>
      </ul>
      <!--热门食谱-->
      <h1 class="tt">热门食谱</h1>
      <ul class="ul2">
        <li v-for="(item, index) in list2" :key="index" class="list2">

          <div class="li2" @click="keySearch(item)">
            <img class="img2" :src="item.fengmian" alt="" />
            <p class="title">{{ item.title }}</p>
          </div>

        </li>
      </ul>
      <!-- 更多推荐 -->

      <h1 class="tt">更多推荐</h1>
      <div class="list">
        <div v-for="(item, index) in list" :key="index" class="list-item">
          <img :src="item.coverImg" @click="goDetail(item)" />
          <p>{{ item.title }}</p>
          <router-link to="/otheruser">
            <div class="userInfo">
              <img :src="item.user_id?item.user_id.avatar:'https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png'" />
              <span>{{ item.user_id?item.user_id.user_name:"不会做饭的西瓜" }}</span>
            </div>
          </router-link>
        </div>
      </div>

      <!--  -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getRecipeList1Api, addCollectApi, deleteCollectApi, getRecipeListApi, getfyRecipeApi } from "@/api/home";
export default {
  created() {
    this.getlist1()
    this.getRecipeList()
    this.getlist()

  },

  methods: {
    // 获取首页是一个列表
    async getlist1() {
      let { data } = await getfyRecipeApi({ page: 1, count: 5 })
      console.log(data.data);
      // 刷新保持收藏不变
      this.list1 = JSON.parse(localStorage.getItem('list1')) || data.data
    },
    // 获取推荐
    async getlist() {
      let { data } = await getfyRecipeApi({ page: 1, count: 10 })
      console.log(data.data);

      this.list = data.data ||[]

    },
    //收藏爱心样式切换
    async shoucang(item, index) {

      if (item.issc == false || !item.issc) {
        // 样式切换
        item.issc = true;
        // 添加收藏接口
        let { data } = await addCollectApi({ recipe_id: item.recipe_id })
        console.log(data);

        this.$forceUpdate(data);
        Toast({
          message: "收藏成功",
          icon: "success",
        });
      } else {
        item.issc = false;
        // 取消收藏接口
        let { data } = await deleteCollectApi({ recipe_id: item.recipe_id })
        console.log(data);

        this.$forceUpdate(data);
        Toast({
          message: "取消收藏",
          icon: "success",
        });
      }
      // 存本地保持刷新收藏爱心不变
      localStorage.setItem('list1', JSON.stringify(this.list1))

    },
    async getRecipeList() {
      let { data } = await getRecipeListApi();
      this.recipeList = data.data || []
      console.log(data);
    },
    // 点击关键字跳转搜索
    keySearch(key, e) {
      // console.log(e.target); 
      console.log(this.recipeList);
      this.searchRecipeList = this.recipeList.filter(item => item.title.includes(key.key))
      // 上传同步vuex仓库

      this.$store.commit('searchRecipe', this.searchRecipeList)
      // 跳转路由
      this.$router.push({ name: 'SearchCs' })
    },
    // 跳转详情
    goDetail(item) {
      console.log(item);
      localStorage.setItem('listDatail', JSON.stringify(item));
      this.$router.push({ name: 'detail', params: { recipe_id: item._id } })
    },

  },
  data() {
    return {
      // 菜谱总列表
      recipeList: [],
      searchRecipeList: [],
      list1: [
        //头部数据列表

      ],
      list2: [
        // 热门食谱数据列表
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u176.png",
          title: "轻食餐",
          key: '轻'
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u175.png",
          title: "生日聚会",
          key: '生日'
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u174.png",
          title: "中式早餐",
          key: '早餐'
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u173.png",
          title: "空气炸锅",
          key: '炸'
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u172.png",
          title: "甜食爱好者",
          key: '甜'
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u171.png",
          title: "下午茶 ",
          key: '茶'
        },
      ],
      list: [
        // 更多推荐数据列表
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u130.png",
          title: "轻食减脂谷物饭",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png",
          title: "黑森林巧克力蛋糕",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u141.png",
          title: "彩虹水果沙拉",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u143.png",
          title: "燕麦香蕉谷物碗",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u153.png",
          title: "减脂午饭",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          coverImg:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u159.png",
          title: "超满足汉堡",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
// .icon-aixin1{font-size: 20px;}
.ul2 {
  height: 270px;
  padding-left: 20px;
  display: flex;
  overflow-x: auto;

  .list2 {
    width: 150px;
    flex-shrink: 0;
    margin-right: 10px;

    .li2 {
      .img2 {
        width: 150px;
        height: 210px;
      }

      .title {
        font-weight: bold;
        margin: 20px 0px;
        color: #000;
      }
    }
  }
}



header {

  height: 50px;
  line-height: 50px;

  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }

  h3 {
    text-align: center;
    font-weight: 700;
  }
}

.tt {
  margin: 20px 0px 20px 20px;
  font-size: 20px;
}

.searchOption {
  padding: 0 20px 15px;
  height: 40px;

  // margin-bottom: 15px;
  .searchInput {
    width: 85%;
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    border-radius: 20px;

    i {
      color: #c0bbbb;
      padding-left: 20px;
    }

    input {
      width: 70%;
      height: 40px;
      border: none;
      outline: none;
      padding-left: 10px;
      background-color: rgba(242, 242, 242, 1);

      &::placeholder {
        font-size: 14px;
        // color: aqua;
      }
    }
  }

  .icon-xiaoxi {
    position: absolute;
    top: 50px;
    right: 20px;
    line-height: 40px;
    font-size: 28px;
  }
}

.content {
  position: absolute;
  width: 100%;
  top: 105px;
  left: 0px;
  bottom: 50px;
  // background:#999;
  overflow: auto;
  // height: calc(100% - );
}

.ul1 {
  display: flex;
  overflow-x: auto;
  height: 380px;
  padding-left: 20px;

  .list1 {
    height: 100%;
    width: 300px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 10px;
    position: relative;

    .li1 {
      width: 100%;
      height: 100%;

      background: #c0bbbb;

      border-radius: 10px;

      .img1 {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }

      .scang {
        bottom: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
        position: absolute;
        text-align: center;
        // padding-top: 11px;

        box-sizing: border-box;
        background: #fff;
        border-radius: 50%;

        i {
          font-size: 20px;
          line-height: 40px;
        }
      }

      .biaoti {
        position: absolute;
        top: 20px;
        left: 20px;

        span {
          font-size: 24px;
          color: #fff;
          font-weight: bold;

          .bt1 {
            font-size: 16px;
            line-height: 34px;
          }
        }
      }
    }
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 20px;

  .list-item {
    width: calc(50% - 40px);
    margin: 15px;

    img {
      width: 166px;
      height: 202px;
    }

    .userInfo {
      margin: 5px 0 0 0;

      img {
        vertical-align: middle;
        margin-right: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      span {
        color: #999;
        vertical-align: middle;
      }
    }
  }
}
</style>
